<script lang="ts" setup>
import { defineProps, reactive, defineEmits, ref, PropType, computed, watch } from 'vue'
import { Products, createdProduct, setProduct } from '@/api/products'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

const emit = defineEmits(['closeDialog', 'optionSuccess'])

const props = defineProps({
  showAddDialog: {
    type: Boolean,
    default: false
  },
  defaultRuleForm: {
    type: Object as PropType<Products>,
    default: () => ({})
  },
  dialogType: {
    validator (value: string) {
      return ['add', 'set'].includes(value)
    },
    default: 'add'
  }
})

const isSet = computed(() => props.dialogType === 'set')
const typeText = computed(() => {
  if (isSet.value) {
    return '修改'
  } else {
    return '添加'
  }
})

watch(() => props.defaultRuleForm, async (now) => {
  const product = await now
  if (isSet.value) {
    Object.assign(ruleForm, product)
  } else {
    Object.assign(ruleForm, {
      name: '',
      coding: '',
      purchasing_price: '',
      selling_price: ''
    })
  }

  Object.assign(ruleForm, product)
}, { immediate: true })

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: '',
  coding: '',
  purchasing_price: '',
  selling_price: ''
})

const rules = reactive({
  name: [
    { required: true, message: '请输入产品名', trigger: 'blur' }
  ],
  coding: [
    {
      required: true,
      message: '请输入产品编码',
      trigger: 'blur'
    }
  ],
  purchasing_price: [
    {
      required: true,
      message: '请输入进价',
      trigger: 'blur'
    }
  ],
  selling_price: [
    {
      required: true,
      message: '请输入售价',
      trigger: 'blur'
    }
  ]
})

const submitForm = async () => {
  if (!ruleFormRef.value) return
  try {
    await ruleFormRef.value.validate()
  } catch {
    return
  }

  try {
    if (isSet.value) {
      await setProduct({ ...ruleForm, id: props.defaultRuleForm.id })
    } else {
      await createdProduct({ ...ruleForm })
    }
    ElMessage.success(typeText.value + '成功')
    emit('optionSuccess')
  } catch (error) {
    ElMessage.error((error as Error).message)
  }
}

</script>
<template>
  <el-dialog
    :model-value="props.showAddDialog"
    title="新建产品"
    width="40%"
    :before-close="() => emit('closeDialog')"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="简码" prop="coding">
        <el-input v-model="ruleForm.coding" />
      </el-form-item>
      <el-form-item label="品名" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="进价" prop="purchasing_price">
        <el-input v-model="ruleForm.purchasing_price"/>
      </el-form-item>
      <el-form-item label="售价" prop="selling_price">
       <el-input v-model="ruleForm.selling_price"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('closeDialog')">取消</el-button>
        <el-button type="primary" @click="submitForm"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.demo-ruleForm {
  width: 90%;
}
</style>
